<template>
  <div class="container">
    <!-- 左侧部分 -->
    <el-card shadow="always" class="card-left">
      <div class="left">
        <div class="logo">
          <img src="/img/logo.png" alt="Vector Logo" />
          <h1>软件协会</h1>
        </div>
        <!-- 服务说明 -->
        <h2>万维网连接五大洲，二进制写尽天下事！</h2>
        <!-- 账号密码登录表单 -->
        <form @submit.prevent="login" class="login-form">
          <div class="form-group">
            <input v-model="username" type="text" id="username" placeholder="输入您的账号" />
          </div>
          <div class="form-group">
            <input v-model="password" type="password" id="password" placeholder="输入您的密码" />
          </div>
          <button type="submit" :disabled="isLoading">
            <span v-if="isLoading">登录中...</span>
            <span v-else>登录</span>
          </button>
        </form>
        <!-- 社交媒体图标区域 -->
        <div class="social-icons">
          <!-- 添加社交媒体图标 -->
        </div>
      </div>
    </el-card>
    <!-- 右侧部分 (倒计时) -->
    <div class="right"></div>
  </div>
  <!-- 错误提示对话框 -->
  <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="30%"
      custom-class="custom-dialog"
      :show-close="true"
      :close-on-click-modal="true"
      :close-on-press-escape="true"
  >
    <div class="dialog-content">
      <!-- 图标 -->
      <div class="dialog-icon">
        <el-icon><Warning /></el-icon>
      </div>
      <!-- 提示信息 -->
      <span>{{ dialogMessage }}</span>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" size="large" @click="closeDialog">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { API_BASE_URL } from '@/config.ts';
import { Warning } from '@element-plus/icons-vue';

const username = ref('');
const password = ref('');
const router = useRouter();
const route = useRoute();
const isLoading = ref(false);

// 对话框相关的响应式变量
const dialogVisible = ref(false);
const dialogTitle = ref('登录失败');
const dialogMessage = ref('');

// 确保组件已完全挂载
onMounted(() => {
  console.log('Login component mounted');
});

// 关闭对话框的方法
const closeDialog = () => {
  dialogVisible.value = false;
  // 如果是密码错误，清空密码输入框
  if (dialogMessage.value.includes('密码错误')) {
    password.value = '';
  }
};

// 显示错误对话框
const showErrorDialog = (message) => {
  dialogMessage.value = message;
  dialogVisible.value = true;
  console.log('Dialog state:', {
    visible: dialogVisible.value,
    title: dialogTitle.value,
    message: dialogMessage.value,
  });
};

// 登录方法
const login = async () => {
  if (!username.value || !password.value) {
    showErrorDialog('请输入用户名和密码');
    return;
  }
  if (isLoading.value) return;
  isLoading.value = true;

  try {
    console.log('Attempting login for:', username.value);
    const response = await axios.post(`${API_BASE_URL}/loginUser`, {
      username: username.value,
      password: password.value,
    });
    console.log('Response:', response.data);

    if (response.data.code === 0) {
      // 登录成功
      const token = response.data.data.token;
      localStorage.setItem('token', token);
      console.log('Stored Token:', localStorage.getItem('token'));
      const redirectUrl = route.query.redirect || '/';
      console.log('Redirect URL:', redirectUrl);
      try {
        await router.push(redirectUrl);
      } catch (error) {
        console.error('跳转失败:', error);
        ElMessage.error('页面跳转失败，请稍后再试');
      }
    } else if (response.data.code === 1) {
      console.log("密码错误，显示对话框");
      showErrorDialog('密码错误，请重新输入');
    } else {
      console.log("其他错误，显示对话框");
      showErrorDialog(response.data.msg || '认证失败，请检查凭证');
    }
  } catch (error) {
    console.error('登录失败:', error);
    showErrorDialog(error.response?.data?.msg || '网络异常导致登录失败');
  } finally {
    isLoading.value = false;
  }
};
</script>

<style scoped>
/* 自定义对话框样式 */
.custom-dialog {
  border-radius: 12px; /* 圆角边框 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

.dialog-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 20px;
}

.dialog-icon {
  font-size: 60px; /* 图标大小 */
  color: #f56c6c; /* 警告颜色 */
  margin-bottom: 16px;
}

.dialog-footer {
  display: flex;
  justify-content: center;
}

.el-button--primary {
  background-color: #409eff; /* 主色调 */
  border-color: #409eff;
  transition: all 0.3s ease; /* 按钮点击动画 */
}

.el-button--primary:hover {
  background-color: #66b1ff; /* 悬停时颜色变化 */
  border-color: #66b1ff;
}
</style>


<style scoped>

.card-left {
  display: flex; /* Use flexbox for alignment */
  flex-direction: column; /* Stack child elements vertically */
  justify-content: center; /* Center content vertically */
  align-items: center; /* Center content horizontally */
  height: 100%; /* Make sure the card takes up the full height of its parent */
  padding: 0; /* Remove padding if needed, adjust according to your design */
  background-color: rgba(251, 251, 251, 0.8); /* Add slight opacity to see the background image */

}


html, body {
  margin: 0;
  height: 100%;
}


.container {
  display: flex;
  justify-content: space-between;
  height: 80vh;
  margin: 10vh 0;
}

.logo img {
  height: 96px;
  margin-right: 20px;
}

.logo h1 {
  font-size: 36px;
  margin: 0;
}

h1, h2 {
  margin: 20px 0;
}

/* 表单样式 */
.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
  max-width: 25vh;
}

.form-group {
  width: 100%;
  margin-bottom: 20px;
}

input {
  padding: 10px;
  width: 100%;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

button {
  padding: 10px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  width: 100%;
  max-width: 300px;
}

.left {
  flex: 1;
  flex-basis: 33.33%; /* Adjust width to 1/3 */
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 10px; /* Optional: add border-radius for rounded corners */
}

.right {
  flex: 2;
  flex-basis: 66.67%; /* Adjust width to 2/3 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url('/img/bg-2aa710c.jpg') no-repeat center center;
  background-size: cover; /* 使图片自适应容器大小 */
  border-radius: 10px;
}


.countdown {
  display: flex;
  gap: 10px;
}

.time-box {
  background-color: #fff;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}

.time-box p {
  font-size: 2em;
  margin: 0;
}

.time-box span {
  font-size: 1em;
  color: #888;
}

.social-icons {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}
</style>
